<template>

  <mk-page type="modal-view" title="picker">
    <div slot="content">
      <div class="page-button-group">
        <mk-button @click="showPicker" size="large">Picker</mk-button>
        <mk-button @click="showMutiPicker" size="large">Multi-column Picker</mk-button>
        <mk-button @click="showBirthdayPicker" size="large">birthday Picker</mk-button>
      </div>
    </div>
  </mk-page>
</template>
<style lang="scss" >
@import '~assets/stylesheets/main';
.page-button-group > * {
  margin-bottom: 15px;
}
</style>
<script>
import MkPage from '../components/mk-page.vue'
import { data1, data2, data3 } from 'example/data/picker'
export default {
  name: 'demo-modal',
  data() {
    return {}
  },
  mounted() {
    this.picker = this.$createMkPicker(
      {
        title: 'picker',
        stitle: 'text',
        svalue: 'value',
        data: [data1],
        onSelect: (selectedText, selectedIndex) => {}
      },
      false
    )
    this.mutiPicker = this.$createMkPicker({
      title: 'Multi-column Picker',
      data: [data1, data2, data3]
    })
    this.birthdayPicker = this.$createDatePicker({
      min: [1980, 8, 8],
      max: [2099, 10, 20],
      title: 'sdf',
      onSelect: (selectedText, selectedIndex) => {
        console.log(
          selectedText[0] + '-' + selectedText[1] + '-' + selectedText[2]
        )
      }
    })
  },
  components: {
    MkPage
  },
  watch: {},
  methods: {
    showPicker() {
      this.picker.show()
    },
    showMutiPicker() {
      this.mutiPicker.show()
    },
    showBirthdayPicker() {
      this.birthdayPicker.show()
    }
  }
}
</script>
